<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩漫画</title>
    <link rel="stylesheet" href="./04-引入.css">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./header.css">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./footer.css">
</head>
<body>

    <div class="header">
        <div class="header_content wrapper clearfix">
            <ul class="head_left f_left clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/">
                        <img src="./bili/tou3.png" alt="logo">
                        <span>哔哩哔哩漫画</span>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://www.bilibili.com/">
                        <img src="./bili/tou4.ico" alt="主站">
                        <span>主站</span>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/">首页</a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/classify">分类</a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/updates">更新</a>
                </li>
            </ul>
            <ul class="head_right f_right clearfix">
                <li class="f_left">
                    <input type="text" placeholder="偷星九月天..">
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/app-download?from=manga_homepage">下载APP</a>
                </li>
                <li class="f_left">
                    <div>
                        <span>登录</span>
                        <span>|</span>
                    </div>
                    <div class="login">
                        <div class="login_box">
                            <div class="lg_top clearfix">
                                <div class="f_left">扫描二维码登录</div>
                                <div class="f_right">
                                    <span class="mima">密码登录</span>
                                    <span class="line"></span>
                                    <span class="duanxin">短信登录</span>
                                </div>
                            </div>
                            <div class="lg_center clearfix">
                                <div class="f_left">
                                    <img src="./bili/dl.png" alt="erweima">
                                    <p>请使用哔哩哔哩客户端</p>
                                    <p>扫码登录或扫码下载APP</p>
                                </div>
                                <div class="f_right">
                                    <input type="text" placeholder="请输入你的账号..">
                                    <input type="text" placeholder="请输入你的密码..">
                                    <div class="btns clearfix">
                                        <button class="f_left">注册</button>
                                        <button class="f_right">登录</button>
                                    </div>
                                    <p class="others_way">其他登录方式</p>
                                    <ul class="clearfix">
                                        <li class="f_left">
                                            <img src="./bili/dl1.png" alt="weixin">
                                            <span>微信登录</span>
                                        </li>
                                        <li class="f_left">
                                            <img src="./bili/dl2.png" alt="weibo">
                                            <span>微博登录</span>
                                        </li>
                                        <li class="f_left">
                                            <img src="./bili/dl3.png" alt="qq">
                                            <span>QQ登录</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="lg_bottom">
                                <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
                                <p>登录或完成注册即代表你同意 用户协议 和 隐私政策</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="f_left">
                    <a href="https://passport.bilibili.com/register/phone.html#/phone">注册</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="banner_content wrapper">
            <ul>
                <li>
                <img src="./bili/tou.jpg" alt="banner">
                </li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <ul class="nav_content wrapper clearfix">
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1034&areas=-1&status=-1&prices=-1&orders=0">竞技</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1013&areas=-1&status=-1&prices=-1&orders=0">冒险</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=999&areas=-1&status=-1&prices=-1&orders=0">热血</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=994&areas=-1&status=-1&prices=-1&orders=0">搞笑</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=995&areas=-1&status=-1&prices=-1&orders=0">恋爱</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1026&areas=-1&status=-1&prices=-1&orders=0">少女</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1020&areas=-1&status=-1&prices=-1&orders=0">日常</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1001&areas=-1&status=-1&prices=-1&orders=0">校园</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1007&areas=-1&status=-1&prices=-1&orders=0">治愈</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=997&areas=-1&status=-1&prices=-1&orders=0">古风</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1016&areas=-1&status=-1&prices=-1&orders=0">玄幻</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=998&areas=-1&status=-1&prices=-1&orders=0">奇幻</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=996&areas=-1&status=-1&prices=-1&orders=0">惊奇</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1023&areas=-1&status=-1&prices=-1&orders=0">悬疑</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=-1&areas=-1&status=-1&prices=-1&orders=0">全部></a>
            </li>
        </ul>
    </div>
    <div class="recommend">
        <div class="recommend_content wrapper">
            <div class="recommend_title clearfix">
                <h2 class="f_left">为你推荐</h2>
                <button class="f_right">换一批</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29884?from=manga_search">
                        <img src="bili/1.jpg" alt="1" title="勇者们都想和魔王修炼">
                        <p>勇者们都想和魔王修炼</p>
                        <p>搞笑</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28449?from=manga_search">
                        <img src="bili/2.jpg" alt="2" title="我缭不动">
                        <p>我缭不动</p>
                        <p>都市</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28483?from=manga_search">
                        <img src="bili/3.jpg" alt="3" title="提督的自我修养">
                        <p>提督的自我修养</p>
                        <p>古风</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28966?from=manga_search">
                        <img src="bili/4.jpg" alt="4" title="若风之声">
                        <p>若风之声</p>
                        <p>奇幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28971?from=manga_search">
                        <img src="bili/5.jpg" alt="5" title="以唇封缄">
                        <p>以唇封缄</p>
                        <p>恋爱</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28199?from=manga_search">
                        <img src="bili/6.jpg" alt="6" title="血姬与骑士">
                        <p>血姬与骑士</p>
                        <p>玄幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29190?from=manga_search">
                        <img src="bili/7.jpg" alt="7" title="成为勇者导师吧！">
                        <p>成为勇者导师吧！</p>
                        <p>冒险</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28219?from=manga_search">
                        <img src="bili/8.jpg" alt="8" title="我的青春恋爱物语果然有问题。-妄言录-">
                        <p class="one_text">我的青春恋爱物语果然有问题。-妄言录-</p>
                        <p>校园</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27795?from=manga_search">
                        <img src="bili/9.jpg" alt="9" title="饮酒女子">
                        <p>饮酒女子</p>
                        <p>日常</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28558?from=manga_search">
                        <img src="bili/10.jpg" alt="10" title="派遣战斗员">
                        <p>派遣战斗员</p>
                        <p>搞笑</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc30269?from=manga_search">
                        <img src="bili/11.jpg" alt="11" title="这个王爷他克妻，得盘!">
                        <p class="one_text">这个王爷他克妻，得盘!</p>
                        <p>古风</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28133?from=manga_search">
                        <img src="bili/12.jpg" alt="12" title="双胞胎兄妹的父皇是宠娃狂魔">
                        <p class="one_text">双胞胎兄妹的父皇是宠娃狂魔</p>
                        <p>少女</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="hot">
        <div class="hot_content wrapper">
            <ol class="hot_title clearfix">
                <li class="f_left">
                    <h2>热门速递</h2>
                </li>
                <li class="f_left">二次元养老院</li>
                <li class="f_left">9.0分以上佳作</li>
                <li class="f_right">
                    <button>换一批</button>
                </li>
            </ol>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25710">
                        <img src="bili/111.png" alt="111" title="犬夜叉（WIDE版）">
                        <p>犬夜叉（WIDE版）</p>
                        <p>冒险</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29598">
                        <img src="bili/222.jpg" alt="222" title="吸血鬼骑士">
                        <p>吸血鬼骑士</p>
                        <p>少女</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27634">
                        <img src="bili/333.jpg" alt="333" title="假面骑士SPIRITS">
                        <p>假面骑士SPIRITS</p>
                        <p>热血</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29055">
                        <img src="bili/444.jpg" alt="444" title="圣魔之血">
                        <p>圣魔之血</p>
                        <p>奇幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29532">
                        <img src="bili/555.jpg" alt="555" title="魔法少女小圆">
                        <p>魔法少女小圆</p>
                        <p>"你愿意和我签订契约成为魔法少女吗?"</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29541">
                        <img src="bili/666.jpg" alt="666" title="今天开始魔之自由业！">
                        <p>今天开始魔之自由业！</p>
                        <p>被马桶冲到异世界开启魔王生涯!</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26434">
                        <img src="bili/777.png" alt="777" title="机动奥特曼">
                        <p>机动奥特曼</p>
                        <p>科幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26459">
                        <img src="bili/888.png" alt="888" title="乱马1/2">
                        <p>乱马1/2</p>
                        <p>日常</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="laugh">
        <div class="laugh_content wrapper">
            <div class="laugh_title clearfix">
                <h2 class="f_left">搞笑爆漫</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26673">
                        <img src="bili/a.jpg" alt="a" title="杀手古德">
                        <p>杀手古德</p>
                        <p>[完结] 共 1781 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26746">
                        <img src="bili/b.jpg" alt="b" title="你遭难了吗？">
                        <p>你遭难了吗？</p>
                        <p>更新至 121 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27886">
                        <img src="bili/c.jpg" alt="c" title="因为是反派大小姐所以养了魔王">
                        <p class="one_text">因为是反派大小姐所以养了魔王</p>
                        <p>[完结] 共 16 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28502">
                        <img src="bili/d.jpg" alt="d" title="圣魔之血">
                        <p class="one_text">公主大人，接下来是“拷问”时间</p>
                        <p>更新至 120 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25967">
                        <img src="bili/e.jpg" alt="e" title="工作细胞">
                        <p>工作细胞</p>
                        <p>[完结] 共 32 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27653">
                        <img src="bili/f.jpg" alt="f" title="封神补完计划">
                        <p>封神补完计划</p>
                        <p>[完结] 共 63 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="adventure">
        <div class="adventure_content wrapper">
            <div class="adventure_title clearfix">
                <h2 class="f_left">冒险传说</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25717">
                        <img src="bili/g.jpg" alt="g" title="鬼灭之刃">
                        <p>鬼灭之刃</p>
                        <p>[完结] 共 208 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26505">
                        <img src="bili/h.png" alt="h" title="咒术回战">
                        <p>咒术回战</p>
                        <p>更新至 166 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27491">
                        <img src="bili/i.jpg" alt="i" title="我的守护女友">
                        <p>我的守护女友</p>
                        <p>更新至 274 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25966">
                        <img src="bili/j.jpg" alt="j" title="关于我转生变成史莱姆这档事">
                        <p class="one_text">关于我转生变成史莱姆这档事</p>
                        <p>更新至 89 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26573">
                        <img src="bili/k.jpg" alt="k" title="我是蜘蛛又怎样？">
                        <p>我是蜘蛛又怎样？</p>
                        <p>更新至 69 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25718">
                        <img src="bili/l.jpg" alt="l" title="石纪元（Dr.Stone）">
                        <p>石纪元（Dr.Stone）</p>
                        <p>更新至 219 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="love">
        <div class="love_content wrapper">
            <div class="love_title clearfix">
                <h2 class="f_left">恋爱物语</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26399">
                        <img src="bili/m.jpg" alt="m" title="渡君的XX即将崩坏">
                        <p>渡君的XX即将崩坏</p>
                        <p>更新至 68 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27007">
                        <img src="bili/n.jpg" alt="n" title="捕获宠物娘的正确方法">
                        <p>捕获宠物娘的正确方法</p>
                        <p>[完结] 共 102 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25980">
                        <img src="bili/o.jpg" alt="o" title="徒然喜欢你">
                        <p>徒然喜欢你</p>
                        <p>[完结] 共 212 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26478">
                        <img src="bili/p.jpg" alt="p" title="寄宿学校的朱丽叶">
                        <p>寄宿学校的朱丽叶</p>
                        <p>[完结] 共 119 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc24841">
                        <img src="bili/q.jpg" alt="q" title="伪恋">
                        <p>伪恋</p>
                        <p>[完结] 共 229 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26981">
                        <img src="bili/r.jpg" alt="r" title="Coffee & Vanilla 咖啡和香草">
                        <p class="one_text">Coffee & Vanilla 咖啡和香草</p>
                        <p>更新至 77 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content wrapper">
            <div class="foot_up clearfix">
                <div class="left f_left clearfix">
                    <div class="left_logo f_left">
                        <img src="./bili/tou3.png" alt="logo">
                        <span>哔哩哔哩漫画</span>
                    </div>
                    <div class="left_text f_left clearfix">
                        <a class="f_left" href="https://www.bilibili.com/blackboard/aboutUs.html">关于我们</a>
                        <a class="f_left" href="https://www.bilibili.com/blackboard/contact.html">联系我们</a>
                        <a class="f_left" href="https://www.bilibili.com/blackboard/friends-links.html">友情链接</a>
                        <a class="f_left" href="https://www.bilibili.com/blackboard/join.html">加入我们</a>
                    </div>
                </div>
                <div class="right f_right">
                    <ul class="clearfix">
                        <li class="f_left">
                            <a href="https://space.bilibili.com/326499679">
                            <img src="./bili/di3.svg" alt="bz">
                            <p>B站官号</p>
                            </a>
                        </li>
                        <li class="f_left">
                            <a href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2Fbilibilicomic&domain=.weibo.com&sudaref=https%3A%2F%2Fmanga.bilibili.com%2F&ua=php-sso_sdk_client-0.6.36&_rand=1637822458.0462">
                            <img src="./bili/di4.png" alt="xl">
                            <p>新浪微博</p>
                            </a>
                        </li>
                        <li class="f_left">
                            <a href="https://manga.bilibili.com/app-download">
                            <img src="./bili/di5.png" alt="khd">
                            <p>下载bilibili 漫画客户端</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="foot_down clearfix">
                <div class=" down_left f_left">
                    <img src="./bili/di1.png" alt="hz">
                    <img src="./bili/di2.png" alt="kk">
                </div>
                <div class="down_right f_left">
                    <p>互联网 ICP 备案：沪 ICP17039440 号 - 1 | 网络文化经营许可证：沪网文 [2020]5452-371 号</p>
                    <p>全国网安备案号：31011002003092 | 增值电信业务经营许可证 沪 B2-20190879</p>
                    <p>12318 全国文化市场举报网站|上海市互联网违法和不良信息举报中心</p>
                    <p>上海呵呵呵文化传播有限公司 | 地址：上海市杨浦区政立路485号 | 电话：021-25099888</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>